<template>
  <div class="app-container home">
    <query-panel :form-data="queryParams" @handleQuery="handleQuery">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item
            label="配件/服务名称："
            prop="componentName"
            label-width="130px"
          >
            <el-input
              v-model="queryParams.componentName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编码：" prop="code" label-width="60px">
            <el-input v-model="queryParams.code" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属节点：" prop="nodeId" label-width="100px">
            <treeselect
              class="treeselect"
              style="width: 100%"
              v-model="queryParams.nodeId"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/componentMg/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plai
          size="mini"
          @click="onAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
      </template>
    </table-panel>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      v-if="open"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="140px"
        size="mini"
      >
        <el-form-item
          v-show="title !== '新增页配件/服务'"
          label="编码："
          required
        >
          {{ form.code }}
        </el-form-item>
        <el-form-item label="配件/服务名称：" prop="componentName">
          <el-input v-model="form.componentName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所属节点：">
          <treeselect
            v-model="form.nodeId"
            :options="menuOptions"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="图片：">
          <image-upload
            list-type="picture-card"
            :limit="1"
            @input="onImg"
            :value="imgData"
          ></image-upload>
        </el-form-item>
        <el-form-item label="价格：">
          <el-input v-model="form.price" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitForm"
          >确定</el-button
        >
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="cancel"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getUser } from "@/api/system/user";
import { detailsImg } from "@/api/file/index";
import {
  addPageManage,
  editListColumn,
  deletePageList,
} from "@/api/accessoriesacc/index";
import { serachNodeList } from "@/api/nodeManage/node";
export default {
  name: "accessoriesAndServices",
  components: {
    TablePanel,
    QueryPanel,
    Treeselect,
  },
  data() {
    return {
      queryParams: {
        componentName: "",
        code: "",
        nodeId: undefined,
      },
      operateArray: [
        {
          name: "编辑",
          icon: "table-column-edit",
        },
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          field: "componentName",
          label: "配件/服务名称",
        },
        {
          field: "code",
          label: "编码",
        },
        {
          field: "price",
          label: "价格",
        },
        {
          field: "nodeId",
          label: "所属节点",
        },
        {
          field: "createTime",
          label: "创建时间",
          type: "date",
        },
        {
          label: "操作",
          width: "200px",
        },
      ],
      open: false,
      title: "新增页配件/服务",
      form: {
        code: "",
        nodeId: undefined,
        componentName: "",
        componentFileId: "",
        price: undefined,
      },
      roleOptions: [],
      menuOptions: [],
      postOptions: [],
      rules: {
        componentName: [
          { required: true, message: "配件/服务名称不能为空", trigger: "blur" },
        ],
      },
      imgData: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.getTreeselect();
      await getUser().then((response) => {
        this.roleOptions = response.roles;
      });
    },
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增
    onAdd() {
      this.imgData = null;
      this.form = {
        code: "",
        nodeId: undefined,
        componentName: "",
        componentFileId: "",
        price: undefined,
      };
      this.title = "新增页配件/服务";
      this.getTreeselect();
      this.open = true;
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    cancel() {
      this.open = false;
    },
    onImg(str) {
      if (typeof res === "boolean") {
        this.form.componentFileId = '';
      } else {
        this.form.componentFileId = str.data.storeId;
      }
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(1111);
          if (this.title === "新增页配件/服务") {
            addPageManage(this.form)
              .then((res) => {
                this.$message.success("操作成功！");
                this.open = false;
                this.$refs.tablePanel.getTable();
              })
              .catch((err) => {
                this.$message.error("操作失败！");
              });
          } else {
            editListColumn(this.form)
              .then((res) => {
                this.$message.success("操作成功！");
                this.open = false;
                this.$refs.tablePanel.getTable();
              })
              .catch((err) => {
                this.$message.error("操作失败！");
              });
          }
        }
      });
    },
    onOperate(type, row) {
      if (type === "编辑") {
        this.imgData = null;
        this.title = "编辑";
        for (let d in this.form) {
          this.form[d] = row[d];
        }
        this.form.componentId = row.componentId;
        if (row.componentFileId) {
          detailsImg(row.componentFileId).then((response) => {
            const blob = new Blob([response]);
            this.imgData = window.URL.createObjectURL(blob);
          });
        }

        this.getTreeselect();
        this.open = true;
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      } else if (type === "删除") {
        this.$confirm("确认删除吗？").then(() => {
          deletePageList(row.componentId)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      }
    },
    getTreeselect() {
      serachNodeList({ moduleType: "2" }).then((res) => {
        this.menuOptions = res.rows;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children === null) {
        delete node.children;
      }
      return {
        id: node.nodeId,
        label: node.nodeName,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped lang="scss">
.input-style {
  width: 70%;
}
::v-deep .vue-treeselect__menu-container {
  left: 0;
}
</style>
